<template>
    <div id="passages">
        <div v-if="passages.length != 0 && passages != null && passages != undefined">
            <div class="passage-box" v-for="(passage, index) in passages" :key="index">
                <el-row v-if="index == 0" style="margin-top: 0;">
                    <img :src="passage.pic"
                        style="width: 100%;border-top-left-radius: 5px;border-top-right-radius: 5px;height: 100px; " />
                </el-row>
                <el-row style="display: flex; align-items: center;">
                    <el-col :span="2">
                        <el-avatar :src="passage.avatar" :size="40"></el-avatar>
                    </el-col>
                    <el-col :span="22" style="display: flex;flex-direction: column;gap:2px;text-align: left;">
                        <!-- <span style="font-size: 17px;font-weight: 800;">{{ passage.author }}</span> -->
                        <button style="width: fit-content; padding: 2px 6px; font-size: 17px;">{{ passage.author
                        }}</button>
                        <span style="font-size: 15px; padding: 2px 6px; ">{{ passage.createTime }}</span>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="2"></el-col>
                    <el-col :span="22" style="text-align:left;font-size: 30px;font-weight: bolder;">
                        <router-link
                            :to="{ name: 'showArticle', params: { articleId: passage.articleId } }">{{ passage.title
                            }}</router-link></el-col>
                    <!-- todo修改成链接查询 -->
                </el-row>
                <el-row>
                    <el-col :span="2"></el-col>
                    <el-col :span="22" style="text-align:left;display: flex;flex-direction: row;gap: 5px;">
                        <button v-for="(tag, index) in passage.tags" :key="index">#{{ tag
                        }}</button>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="2"></el-col>
                    <el-col :span="22" style="text-align:left;display: flex;flex-direction: row;gap: 5px;">
                        <button>{{ passage.comments }} comments</button>
                        <button>{{ passage.articleId }}</button>
                        <button><el-icon v-if="!passage.isCollect" size="large">
                                <CollectionTag />
                            </el-icon></button>
                    </el-col>
                </el-row>
            </div>
        </div>
        <div v-else>
            <el-empty>
                <el-button type="primary" @click="router.push('/edite-travel')">写游记</el-button>
            </el-empty>
        </div>
    </div>
</template>

<script setup lang="ts">
import router from '@/router';
import type { Passage } from '@/utils/dataType/ArticleModel';


const props = defineProps<{
    passages: Array<Passage>,
}>()
const passages = props.passages

//todo实现无限滚动的功能

</script>

<style scoped>
#passages {
    width: 100%;
}

#passages .passage-box {
    background-color: white;
    border-radius: 5px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    /* padding: 10px; */
    width: 100%;
    margin: 10px auto;
}

.el-row {
    margin: 10px auto;
    font-family: -apple-system, BlinkMacSystemFont;
}

button {
    display: inline-block;
    padding: 6px 12px;
    margin: 4px 4px 0 0;
    font-size: 14px;
    color: #3d3d3d;
    border-radius: 3px;
    text-decoration: none;
    border: none;
    border: 1px solid transparent;
    background-color: white;
    transition: 5ms;
}

button:hover {
    background-color: #e2e2e2;
    /* border: 1px solid #d1d5da; */
}
</style>
